<link rel="stylesheet" href="__STATIC__/mp/css/task.css">
<style type="text/css">
.layui-form-label{padding:9px 15px 9px 3px;}
.task_lift{color:#999999;}
.title{font-weight:bold;}
.layui-card-body{line-height:normal;}
.project_name{overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	width:110px;
	color:#00CC00;
}
.task_floor{clear:both;}
.task_floor div{float:left;padding-right:8px;}
.notcheck{color:#FF9900;}
.hander{cursor:pointer}
.btn_small{
	height:24px;line-height:24px;padding:0px 2px;
}
/* 下拉菜单 */
.layui-dropdown{position: absolute; left: -999999px; top: -999999px; z-index: 77777777; margin: 5px 0; min-width: 100px;}
.layui-dropdown:before{content:""; position: absolute; width: 100%; height: 6px; left: 0; top: -6px;}
.layui-dropdown-shade{top: 0; left: 0; width: 100%; height: 100%; _height: expression(document.body.offsetHeight+"px"); position: fixed; _position: absolute; pointer-events: auto;}
.layui-anim{-webkit-animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-duration: 0.3s; animation-fill-mode: both;}
.layui-anim.layui-icon{display: inline-block;}
.layui-anim-loop{-webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}
.layui-trans,
.layui-trans a{transition: all .2s; -webkit-transition: all .2s;} /* 过度变换 */
.layui-anim-downbit{animation-name: layui-downbit;}
/* 基础菜单元素 */
.layui-menu{position: relative; margin: 0px 0px 5px; background-color: #fff; box-sizing: border-box;}
.layui-menu *{box-sizing: border-box;}
.layui-menu li,
.layui-menu-body-title a{padding: 5px 15px;}
.layui-menu li{position: relative; margin: 1px 0; width: calc(100% + 1px); line-height: 26px; color: rgba(0,0,0,.8); font-size: 14px; white-space: nowrap; cursor: pointer; transition: all .3s;}
.layui-menu li:hover{background-color: #F6F6F6; }

.layui-menu-item-parent:hover>.layui-menu-body-panel{display: block; animation-name: layui-fadein; animation-duration: 0.3s; animation-fill-mode: both; animation-delay:.2s;}
.layui-menu-item-parent .layui-menu-body-title,
.layui-menu-item-group .layui-menu-body-title{padding-right: 25px;}

.layui-menu .layui-menu-item-group:hover,
.layui-menu .layui-menu-item-none:hover,
.layui-menu .layui-menu-item-divider:hover{background: none; cursor: default;}
.layui-menu .layui-menu-item-group>ul{margin: 5px 0 -5px;}
.layui-menu .layui-menu-item-group>.layui-menu-body-title{color: rgba(0,0,0,.35); user-select: none;}
.layui-menu .layui-menu-item-none{color: rgba(0,0,0,.35); cursor: default;}

.layui-menu .layui-menu-item-none{text-align: center;}
.layui-menu .layui-menu-item-divider{margin: 5px 0; padding: 0; height: 0; line-height: 0; border-bottom: 1px solid #eee; overflow: hidden;}

.layui-menu .layui-menu-item-up:hover,
.layui-menu .layui-menu-item-down:hover{cursor: pointer;}
.layui-menu .layui-menu-item-up>.layui-menu-body-title{ color: rgba(0,0,0,.8);}
.layui-menu .layui-menu-item-up>ul{visibility: hidden; height: 0; overflow: hidden;}
.layui-menu .layui-menu-item-up>.layui-menu-body-title:hover>.layui-icon,
.layui-menu .layui-menu-item-down:hover>.layui-menu-body-title>.layui-icon{color: rgba(0,0,0,1);}
.layui-menu .layui-menu-item-down>ul{visibility: visible; height: auto;}

.layui-menu .layui-menu-item-checked,
.layui-menu .layui-menu-item-checked2{background-color: #F6F6F6!important; color: #5FB878;}
.layui-menu .layui-menu-item-checked a,
.layui-menu .layui-menu-item-checked2 a{color: #5FB878;}
.layui-menu .layui-menu-item-checked:after{position: absolute; right: 0; top: 0; bottom: 0; border-right: 3px solid #5FB878; content: "";}

.layui-menu-body-title{position: relative; overflow: hidden; text-overflow: ellipsis;}
.layui-menu-body-title a{display: block; margin: -5px -15px; color: rgba(0,0,0,.8);}
.layui-menu-body-title a:hover{transition: all .3s;}
.layui-menu-body-title>.layui-icon{position: absolute; right: 0; top: 0; font-size: 14px;}
.layui-menu-body-title>.layui-icon:hover{transition: all .3s;}
.layui-menu-body-title>.layui-icon-right{right: -1px;}
.layui-menu-body-panel{display: none; position: absolute; top: -7px; left: 100%; z-index: 1000; margin-left: 13px; padding: 5px 0;}
.layui-menu-body-panel:before{content: ""; position: absolute; width: 20px; left: -16px; top: 0; bottom: 0;}
.layui-menu-body-panel-left{left: auto; right: 100%; margin: 0 13px 0;}
.layui-menu-body-panel-left:before{left: auto; right: -16px;}

.layui-menu-lg li{line-height: 32px;}
.layui-menu-lg li:hover,
.layui-menu-lg .layui-menu-body-title a:hover{background: none; color: #5FB878;}
.layui-menu-lg li .layui-menu-body-panel{margin-left: 14px}
.layui-menu-lg li .layui-menu-body-panel-left{margin: 0 15px 0;}
</style>
<div>
	<form class="layui-form" action="{:url()}" id="hisi-table-search" onSubmit="getList()" lay-filter="task-form">
	<div class="layui-row">
		<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
			
			<div class="layui-inline order" style="display:none">
				<div class="layui-input-inline">
					<select name="order" lay-filter="order"> 
						<option value="priority">按优先级排序</option>
						<option value="create_time">按创建时间排序</option>
						<option value="update_time">按更新时间排序</option>
					</select>
				</div>
			</div>
			<div class="layui-inline project-id">
            	<label class="layui-form-label">所属项目：</label>
				<div class="layui-input-inline">
					<select name="project_id" lay-filter="project-id">
                    	<option value="">全部项目</option>
						{foreach $projectKV as $k=>$v}
						<option value="{$k}">{$v}</option>
						{/foreach}
					</select>
				</div>
			</div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="keywords" lay-verify="" placeholder="订单号/任务名称" class="layui-input" style="width:230px;">
                </div>
            </div>
            <div class="layui-inline">
				<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" onclick="getList()">搜索</button>
				<div class="layui-input-inline">
					&nbsp;&nbsp;<a href="{:url('taskEdit')}" sourcehref="{:url('taskEdit')}" hisi-data="{width: '50%', height: '520px'}" class="layui-btn layui-btn-green  hisi-iframe add_task_btn" title="新建任务">
						<i class="layui-icon">&#xe654;</i>新建任务
					</a>
				</div>
			</div>
		</div>
		<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
			<!-- <a class="layui-btn layui-btn-sm">按钮</a> -->
		</div>
        
	</div>
	<input type="hidden" value="1" name="type">
	</form>
	
	<div class="layui-tab layui-tab-card" lay-filter="tabFilter">
		<ul class="layui-tab-title">
        	<li lay-id="1" class="layui-this">与我相关的</li>
            <li lay-id="3">我关注的</li>
			<li lay-id="0" >全部任务</li>
			<li lay-id="2" style="display:none">我参与的</li>
		</ul>
		<div class="layui-tab-content layui-row layui-col-space10">
			<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">未开始
						<span class="layui-badge-rim layui-bg-green card-num card-num-1">0</span>
					</div>
					<div class="layui-card-body card-todo" data-status="1">
						<!-- 模板输出start -->
						<!-- 模板输出end -->
					</div>
				</div>
			</div>
			<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">进行中
						<span class="layui-badge layui-bg-blue card-num card-num-2">0</span>
					</div>
					<div class="layui-card-body card-doing" data-status="2">
						<!-- 模板输出start -->
						<!-- 模板输出end -->
					</div>
				</div>
			</div>
			<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">已完成
						<span class="layui-badge-rim  card-num card-num-3">0</span>
					</div>
					<div class="layui-card-body card-done" data-status="3">
						<!-- 模板输出start -->
						<!-- 模板输出end -->
					</div>
				</div>
			</div>
			<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">已暂停
						<span class="layui-badge layui-bg-orange card-num card-num-4">0</span>
					</div>
					<div class="layui-card-body card-pause" data-status="4">
						<!-- 模板输出start -->
						<!-- 模板输出end -->
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="doneTpl" class="hide">
	<form class="layui-form form-plan" lay-verify="" action="{:url('checkTask')}" method="post">
    <input type="hidden" name="task_id" class="task_id_input" value="">
    <input type="hidden" name="audit_status" class="audit_status_input" value=""> 
	<div class="layui-form-item pt20">
		<div class="pt20" style="text-align:center;">
          <button class="layui-btn" auditstatus="1" lay-submit lay-filter="save" >审核通过</button>
          <button class="layui-btn layui-btn-warm" auditstatus="2" style="margin-left:50px;" lay-submit lay-filter="save" >任务驳回</button>
        </div>
	</div>
	</form>
</div>

{include file="system@block/layui" /}

<script type="text/html" id="taskTpl">
	{{#  layui.each(d, function(k, v){ }}
	<div class="task-item {{# if(v.canChangeStatus==0){ }}ignore-task-item{{# } }} task-item-{{ v.id }}" old-status="{{v.status}}" data-id="{{ v.id }}">
		<div class="layui-row number">
			<div class="layui-col-md7">
				<i class="layui-icon layui-icon-priority{{ v.priority }}">&#xe66c;</i>T.{{ v.id }}- <span class="copy-item">{{ v.client_ordernum }}</span>
			</div>
			<div class="layui-col-md5 text-right">创/负责: {{ v.admin_user }}/{{ v.execute_user }}
			</div>
		</div>
		<div class="title"><a href="{:url('detail')}?id={{ v.id }}" class="hisi-iframe" hisi-data="{width: '65%', height: '96%'}" title="[task-{{ v.id }}] 任务详情">{{ v.name }}</a></div>
		
		<div class="layui-row">
			
			<div class=" task_lift">
				创建<span class="update-time">{{ layui.util.toDateString(v.create_time*1000,'MM-dd HH')}}点</span> / 
				<span style="color:#FF5722" id="task_label_{{ v.id }}">{{v.task_label}}</span>
				<span style="display:none">进行【2122】05-10 18h /完成03-12</span>
				&nbsp;<button class="layui-btn layui-btn-sm layui-btn-primary btn_small test_add_label" data-id="{{ v.id }}">
				<i class="layui-icon layui-icon-add-1"></i>标签 <i class="layui-icon layui-icon-down"></i></button>
			</div>
			<!-- 审批逻辑处理-->
			<div class="task_floor">
				<div class="hander" onclick="openCheckWindow({{v.id}})">
				<span class="{{# if(!v.audit_status){ }}notcheck{{# } }}">{{# if(v.audit_status){ }}已审{{# }else{ }}未审{{# }}}</span>{{# if(v.audit_status){ }}-{{# if(v.audit_status>1){ }}<strong>驳回</strong>{{# }else{ }}已通过{{# }}}{{# }else{ }}-({{v.audit_users}}){{# }}}</div>
				<div class="project_name" title="{{v.project_name}}">【{{v.project_name}}】</div>
				
				
				<div class="text-right" style="float:right">
					<a class="layui-btn-xs hisi-iframe" style="display:none" href="{:url('detail')}?id={{ v.id }}" hisi-data="{width: '75%', height: '90%'}" title="[task-{{ v.id }}] 任务详情">
						<i class="layui-icon">&#xe63a;</i>{{# if(v.commentNum > 0){ }}{{ v.commentNum }}{{# } }}
					</a>
					{{# if(v.canAttention){ }}
					<a class="layui-btn-xs hisi-ajax" href="{:url('attention')}?id={{ v.id }}" refresh="false" callback="callbackAttention" title="点击关注">
						<i class="layui-icon attention-{{ v.id }} {{# if(v.isAttention){ }}yellow{{# } }}">{{# if(v.isAttention){ }}&#xe67a;{{# }else{ }}&#xe67b;{{# } }}</i>
					</a>
					{{# } }}
					{{# if(v.canEdit){ }}
					<a class="layui-btn-xs hisi-iframe" hisi-data="{width: '50%', height:'520px'}" href="{:url('taskEdit')}?task_id={{ v.id }}" title="修改任务">
						<i class="layui-icon">&#xe642;</i>编辑
					</a>
					{{# } }}
	
					{{# if(v.canDel){ }}
					<a class="layui-btn-xs hisi-ajax" style="display:none" href="{:url('del')}?id={{ v.id }}" refresh="false" callback="callbackDel" confirm="您确定要执行该操作吗？">
						<i class="layui-icon">&#xe640;</i>
					</a>
					{{# } }}
				</div>
			</div>
		</div>
	</div>		
	{{# }) }}			
</script>

<script src="__STATIC__/mp/js/Sortable.min.js"></script>
<script type="text/javascript">
	layui.use(['jquery', 'tool', 'laytpl', 'form', 'element','dropdown'], function() {
		var dropdown = layui.dropdown
		var $ = layui.jquery;
		var laytpl = layui.laytpl;
		var form = layui.form;
		var element = layui.element;
		
		// 卡片背景高度铺满
		$('.layui-card-body').css('height', ($(window).height()-130) + 'px');
		$(window).resize(function() {
			$('.layui-card-body').css('height', ($(window).height()-130) + 'px');
		});
		
		// 关注后回调
		window.callbackAttention = function(obj, res) {
			var taskId = res.data.taskId;
			if (res.data.isAttention == 1) {
				$('.attention-'+taskId).addClass('yellow');
				$('.attention-'+taskId).html('&#xe67a;');
			} else {
				$('.attention-'+taskId).removeClass('yellow');
				$('.attention-'+taskId).html('&#xe67b;');
			}
		};
		
		// 删除后回调
		window.callbackDel = function(obj, res) {
			if(res.code == 1) {
				var taskId = res.data.taskId;
				var cardNum = parseInt($('.task-item-'+taskId).parents('.layui-card').find('.card-num').html());
				$('.task-item-'+taskId).parents('.layui-card').find('.card-num').html(cardNum-1);
				$('.task-item-'+taskId).remove();
			}
		};
		
		// 实现拖放效果
		var SortableInit = function(flag) {
			return {
				group: "task",
				animation: 300,
				sort: false, // 设为false，禁止sort
				handle: ".task-item",	// 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动
				filter: ".ignore-task-item",  // 过滤器，不需要进行拖动的元素
				chosenClass: "sortable-chosen",	// 被选中项的css 类名
				dragClass: "sortable-drag",  // 正在被拖拽中的css类名
				ghostClass: "sortable-ghost",  // drop placeholder的css类名
				scrollSpeed: 100, //滚动速
				dataIdAttr: 'data-id',
				/* onAdd: function(evt) {
					console.log('onAdd.'+flag, [evt.item, evt.from]);
				},
				onUpdate: function(evt) {
					console.log('onUpdate.'+flag, [evt.item, evt.from]);
				},
				onRemove: function(evt) {
					console.log('onRemove.'+flag, [evt.item, evt.from]);
				},
				onStart: function(evt) {
					console.log('onStart.'+flag, [evt.item, evt.from]);
				},
				onSort: function(evt) {
					console.log('onSort.'+flag, [evt.item, evt.from]);
				}, */
				onEnd: function(evt) {
					var taskId = $(evt.item).attr('data-id');
					var fromStatus = $(evt.from).attr('data-status');
					var toStatus = $(evt.to).attr('data-status');
					var old_status=$(evt.item).attr('old-status');
					if(old_status==toStatus){ 
						return ;
					}
					/* console.log(SortableTodo.toArray());*/
					var formOri = parseInt($('.card-num-'+fromStatus).html());
					var toOri = parseInt($('.card-num-'+toStatus).html());
					$('.card-num-'+fromStatus).html(formOri-1);
					$('.card-num-'+toStatus).html(toOri+1);
					
					$.ajax({
						type: "POST",
						url: "{:url('status')}",
						data: "id="+taskId+"&status="+toStatus,
						dataType:"json",
						success: function(res){
							if (res.code == 1) {
								layer.msg(res.msg, {icon: 1});
								$(evt.item).attr('old-status',toStatus);
							} else {
								layer.msg(res.msg, {icon: 2,anim: 6});
							}
						}
					});
				}
			}
		}
		var SortableTodo = Sortable.create($('.card-todo')[0], SortableInit('card-todo'));
	    var SortableDoing = Sortable.create($('.card-doing')[0], SortableInit('card-doing'));
		var SortableDone = Sortable.create($('.card-done')[0], SortableInit('card-done'));
		var SortablePause = Sortable.create($('.card-pause')[0], SortableInit('card-pause'));
		
		// 获取任务列表
		window.getList = function() {
			var data = form.val("task-form");
			$('.card-todo,.card-doing,.card-done,.card-pause').html('<img src="/static/mp/image/loading.gif">');
			var addtask_href=$(".add_task_btn").attr("sourcehref")+"?project_id="+data.project_id;
			$(".add_task_btn").attr("href",addtask_href);
			$.ajax({
				type: "POST",
				url: "{:url('')}",
				data: data,
				dataType:"json",
				success: function(res){
					if (res.code == 1) {
						var todoList = res.data.todoList;
						var doingList = res.data.doingList;
						var doneList = res.data.doneList;
						var pauseList = res.data.pauseList;
						$('.card-num-1').html(res.data.todoNum);
						$('.card-num-2').html(res.data.doingNum);
						$('.card-num-3').html(res.data.doneNum);
						$('.card-num-4').html(res.data.pauseNum);
						
						var Tpl = $('#taskTpl').html();
						laytpl(Tpl).render(todoList, function(html){
							$('.card-todo').html(html);
						});
						
						laytpl(Tpl).render(doingList, function(html){
							$('.card-doing').html(html);
						});
						
						laytpl(Tpl).render(doneList, function(html){
							$('.card-done').html(html);
						});
						
						laytpl(Tpl).render(pauseList, function(html){
							$('.card-pause').html(html);
						});
						
						var aaaa=dropdown.render({
							elem: '.test_add_label'
							,data: [{
								title: '已发货'
								,id: '已发货'
							}
							/*, {
								title: '未发货'
								,id: '已发货'
							}*/
							]
							,click: function(data, othis){
								var elem = $(this.elem)
									,listId = elem.data('id'); //表格列表的预埋数据
								//layer.msg('得到表格列表的 id：'+ listId +'，下拉菜单 id：'+ data.id);
								$.ajax({
									type: "post",
									url: "{:url('taskEdit')}?action=addTaskLabel",
									data: {id: listId, label_name: data.id},
									dataType: "json",
									success: function (res) {
										$("#task_label_"+listId).html($("#task_label_"+listId).html()+" "+data.id+" ");
										layer.msg('设置成功');
									}
								});
							}
						});
					} else {
						layer.msg(res.msg, {icon: 2,anim: 6});
					}
 				}
	 		});
		}
		getList();
		
		// 切换选项卡
		element.on('tab(tabFilter)', function(data){
			console.log(this.getAttribute('lay-id')); //当前Tab标题所在的原始DOM元素
			$('input[name=type]').val(this.getAttribute('lay-id'));
			getList();
		});
		// 切换排序
		form.on('select(order)', function(data){
			//console.log(data.value); //得到被选中的值
			getList();
		});
		// 切换项目
		form.on('select(project-id)', function(data){
			//console.log(data.value); //得到被选中的值
			getList();
		});
		
		
		
		// 获取任务列表
		window.openCheckWindow = function(taskid) {
			$(".task_id_input").val(taskid);
			var content = $('#doneTpl').html();
			var title='任务审核';
			layerStockOutIn = layer.open({
				type: 1
				,area: ['500px','250px']
				,offset: '200px'
				//,shade:[0.8, '#393D49']
				,anim: parseInt(Math.random()*(6+1),10)
				,skin:'layui-layer-molv'
				,title:title+'-T.'+taskid
				,content: content
			});
		}
		form.on('submit(save)', function (data) {
			auditstatus=data.elem.attributes.auditstatus.nodeValue;
			$(".audit_status_input").val(auditstatus);
			$.ajax({
				type: "POST",
				url: "{:url('checkTask')}",
				data: $('.form-plan').eq(1).serialize(),
				dataType:"json",
				success: function(res){
					if (res.msg == 'success') {
						layer.close(layerStockOutIn);
						layer.msg(res.msg, {icon: 1,time:600,end:function(){
					 		getList();
					 }});
					} else {
						layer.close(layerStockOutIn);
						layer.msg(res.msg, {icon: 2,anim: 6,time:600});
					}
				}
			});
			return false;
		});
		

		
	});
</script>